<template>
  <div class="page-wrapper page-home">
    <TopSearch @on-search="handleSearch"></TopSearch>
    <UserData></UserData>
    <Map></Map>
    <UserHandle></UserHandle>
    <StateTabs @on-change="handleStateChange"></StateTabs>
    <van-list
      ref="vanListRef"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="task-wrapper">
        <TaskItem
          v-for="(item, idx) of list"
          :key="idx"
          :item="item"
          @get-list="handleGetList(item, idx)"
        ></TaskItem>
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useUserStore } from '@/store/index';
  import { apiGetDriverHomePage, apiGetDispatchHomePage } from '@/api/home';
  import { apiGetBillPage, apiGetOrderDetail } from '@/api/dispatch';
  import TopSearch from './components/TopSearch/index.vue';
  import UserData from './components/UserData/index.vue';
  import Map from './components/Map/index.vue';
  import UserHandle from './components/UserHandle/index.vue';
  import StateTabs from './components/StateTabs/index.vue';
  import TaskItem from './components/TaskItem/index.vue';

  const { userType, driver_id } = useUserStore();
  const active = ref(4);
  let pageNum = 1;
  const pageSize = 10;
  const loading = ref(false);
  const finished = ref(true);
  const list = ref<any[]>([]);
  let activeTab = 0;

  const vanListRef = ref();

  const getFun = (type: string, state: number) => {
    if (type === 'dispatch' && state === 11) {
      return apiGetBillPage;
    }

    const obj: any = {
      driver: apiGetDriverHomePage,
      dispatch: apiGetDispatchHomePage,
    };

    return obj[type];
  };

  const onLoad = () => {
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    loading.value = true;

    const api = getFun(userType, active.value);

    const params: any = {
      page_num: pageNum,
      page_size: pageSize,
    };

    if (active.value === -1) {
      if (userType === 'dispatch') {
        params.stateList = [1, 2, 11];
      }
      if (userType === 'driver') {
        params.stateList = [5, 6];
      }
    } else {
      params.stateList = [active.value];
    }

    if (active.value === 11) {
      params.state = '未结算';
    }
    if (userType === 'driver') {
      params.driver_id = driver_id;
    }
    api(params).then((res: any) => {
      list.value.push(...res.data.rows);
      // 加载状态结束
      loading.value = false;
      pageNum += 1;
      // 数据全部加载完成
      if (res.data.rows.length < pageSize) {
        finished.value = true;
      }
    });
  };

  const handleSearch = (value: string) => {};

  const handleStateChange = (value: number) => {
    activeTab = value;
    active.value = value;
    list.value = [];
    pageNum = 1;
    finished.value = false;
    vanListRef.value.check();
  };

  const handleGetList = () => {
    handleStateChange(activeTab);
  };
</script>

<style lang="less" scoped>
  .page-home {
    width: 100%;
    .task-wrapper {
      padding: 20px;
      padding-bottom: 0;
    }
  }
</style>
